import React from 'react'
import { 
  Image, 
  StyleSheet, 
  TouchableOpacity 
} from 'react-native'
import { Heading3 } from '../../public/widget/text'
import { screen } from '../../public/common';
class MenuItem extends React.Component {
  render() { 
    let {onLoantypeChange,title,icon,type} =this.props
    return (<TouchableOpacity 
                style={styles.container}
                onPress={()=>{
                  onLoantypeChange(title,type);
                }}>
                <Image source={icon} resizeMode='contain' style={styles.icon} />
                <Heading3>
                  {title}
                </Heading3>
        </TouchableOpacity>)
  }
}


const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center',
    width: screen.width / 4,
    height: screen.width / 4,
  },
  icon: {
    width: screen.width / 7,
    height: screen.width / 7,
    margin: 5,
  }
});


export default MenuItem;
